// 不合格问题
<template>
    <f7-page class="hntsh">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>不合格问题</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <van-form ref="form">
            <f7-list
                media-list
                class="search-list"
                v-if="models.questionList.length > 0"
            >
                <li v-for="(item, index) in models.questionList" :key="index">
                    <div class="index-box">{{ index + 1 }}</div>
                    <div class="right-box">
                        <div class="select-box">
                            <van-field
                                v-model="item.standardName"
                                label=""
                                rows="3"
                                autosize
                                type="textarea"
                                placeholder="请描述不合格问题"
                                :rules="[
                                    {
                                        required: true,
                                        message: '请输入正确内容',
                                    },
                                ]"
                            >
                            </van-field>
                        </div>
                        <div class="select-box">
                            <van-field
                                v-model="item.question"
                                label=""
                                rows="3"
                                autosize
                                type="textarea"
                                placeholder="请填写问题处理要求"
                                :rules="[
                                    {
                                        required: true,
                                        message: '请输入正确内容',
                                    },
                                ]"
                            >
                            </van-field>
                        </div>
                        <div class="select-box select-boxs">
                            <van-field
                                v-model="item.questionType"
                                readonly
                                label=""
                            >
                                <div slot="input" class="input-cell">
                                    <v-picker-div
                                        placeholder="所属分类"
                                        :columns="models.eqmQuestionClassification"
                                        :assignment="item"
                                        code="questionType"
                                        :rules="[
                                            {
                                                required: true,
                                                message: '请输入正确内容',
                                            },
                                        ]"
                                        :defCheck="item.questionType"
                                    >
                                    </v-picker-div>
                                </div>
                            </van-field>
                            <van-field
                                v-model="item.questionLevel"
                                readonly
                                label=""
                            >
                                <div slot="input" class="input-cell">
                                    <v-picker-div
                                        placeholder="所属项目"
                                        :columns="models.eqmQuestionType"
                                        :assignment="item"
                                        code="questionLevel"
                                        :rules="[
                                            {
                                                required: true,
                                                message: '请输入正确内容',
                                            },
                                        ]"
                                        :defCheck="item.questionLevel"
                                    >
                                    </v-picker-div>
                                </div>
                            </van-field>
                        </div>
                        <qm-file-upload
                            :ref="`eqmCheckQuestion${index + 1}`"
                            :galleryOptions="{ multiple: true, maximum: 9 }"
                            extensions="jpg,jpeg,png"
                            :params="{
                                type: 'attach',
                                dataKey: item.questionId,
                                bizType: 'eqmCheckQuestion',
                            }"
                            :uploadId="`eqmCheckQuestion${index + 1}`"
                        >
                        </qm-file-upload>
                    </div>
                    <span @click="deleteItem(index)">
                        <f7-icon f7="xmark" size="18px"> </f7-icon>
                    </span>
                </li>
            </f7-list>
            <v-empty v-else description="暂无数据" />
            <div class="btn-box">
                <f7-button fill class="submit-btn" @click="add()">
                    <img
                        width="16px"
                        src="../../../../assets/img/qzjx/unqualified-edit.svg"
                        alt=""
                    />
                    添加问题
                </f7-button>
                <f7-button fill class="submit-btn" @click="showProject = true">
                    <img
                        width="16px"
                        src="../../../../assets/img/qzjx/unqualified-problem.svg"
                        alt=""
                    />
                    问题库
                </f7-button>
            </div>
        </van-form>
        <!-- 问题库 -->
        <v-popup-problem
            v-model="showProject"
            :data="models.eqmQuestionCategory"
            @save="suerProject"
        >
        </v-popup-problem>
        <f7-toolbar position="bottom" no-shadow class="fff">
            <f7-button fill class="submit-btn" @click="sure()">提交</f7-button>
        </f7-toolbar>
    </f7-page>
</template>

<script>
import vPopupProblem from './components/v-popup-problem.vue'
import controller from '@/libs/framework/controller'
export default class instance extends controller {
    mixin() {
        return {
            props: {
                checkId: {
                    type: String,
                },
                caseId: {
                    type: String,
                },
                propertyId: {
                    type: String,
                },
            },
            components: {
                vPopupProblem,
            },
            data() {
                return {
                    models: {
                        questionList: [],
                        replyList: [],
                        workItem: [],
                        eqmQuestionCategory: [],
                        eqmQuestionClassification: [],
                        eqmQuestionType: [],
                        eqmQuestionLevel: [],
                    },
                    showProject: false,
                }
            },
            mounted() {
                this.getData()
            },
            methods: {
                add() {
                    this.models.questionList.push({
                        questionId: Math.uuid(),
                        checkId: this.checkId,
                        sort: this.models.questionList.length + 1,
                        standardName: '',
                        question: '',
                        questionType: '',
                        questionLevel: '',
                    })
                },
                suerProject(result) {
                    if (result.length > 0) {
                        result.forEach((element) => {
                            if (!element.children) {
                                this.models.questionList.push({
                                    questionId: Math.uuid(),
                                    checkId: this.checkId,
                                    sort: this.models.questionList.length + 1,
                                    standardName: element.name,
                                    question: '',
                                    questionType: element.rootCode,
                                    questionLevel: element.reserved2,
                                })
                            }
                        })
                    }
                },
                getData() {
                    this.$f7.request.post(
                        `/app/equipment/eqmCheck/queryQuestion`,
                        {
                            checkId: this.checkId,
                            propertyId: this.propertyId,
                        },
                        (r) => {
                            r = JSON.parse(r)
                            if (r && r.success) {
                                this.models = r.parameters

                                this.models.eqmQuestionClassification = JSON.parse(JSON.stringify(this.models.eqmQuestionCategory[0].children));
                                this.models.eqmQuestionClassification.forEach((obj) => {
                                    delete obj.children
                                });
                            } else {
                                this.$toast(r.message || '网络错误，请稍后重试')
                            }
                        }
                    )
                },
                // 删除问题
                deleteItem(index) {
                    var self = this;
                    var item = self.models.questionList[index];
                    if(item) {
                        if(item.questionId) {
                            self.$f7.request.post(
                                `/app/equipment/eqmCheck/deleteQuestion`,
                                {
                                    questionId: item.questionId
                                },
                                (r) => {
                                    r = JSON.parse(r)
                                    if (r && r.success) {
                                        self.models.questionList.splice(index, 1)
                                    } else {
                                        this.$toast(
                                            r.message || '网络错误，请稍后重试'
                                        )
                                    }
                                }
                            )
                        } else {
                            self.models.questionList.splice(index, 1)
                        }
                    }
                },
                //提交
                sure() {
                    var self = this
                    self.$refs.form
                        .validate()
                        .then((_) => {
                            self.$f7.request.post(
                                `/app/equipment/eqmCheck/addQuestion`,
                                {
                                    caseId: this.caseId,
                                    questionList: this.models.questionList,
                                },
                                (r) => {
                                    r = JSON.parse(r)
                                    if (r && r.success) {
                                        this.$f7.dialog.alert(
                                            '提交成功',
                                            () => {
                                                this.$f7.views.current.router.back({force:true})
                                            }
                                        )
                                    } else {
                                        this.$toast(
                                            r.message || '网络错误，请稍后重试'
                                        )
                                    }
                                }
                            )
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                },
            },
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
@{deep} .van-form{
    background: #fff;
    margin-bottom:16px;
    .btn-box{
        display:flex;
        padding-bottom:16px;
        .submit-btn{
            background: #FFFFFF;
            border: 1px solid #1990FF;
            color: #1990FF;
            display: flex;
            align-items: center;
            img{
                margin-right:8px;
            }
        }
    }
}
.submit-btn{
    border-radius: 24px;
}
.search-list {
    padding: 10px 16px;
    margin:0;
    @{deep}ul{
        background: transparent;
    }
    li {
        display:flex;
        padding:16px 7px;
        margin-bottom:10px;
        background: #ffffff;
        box-shadow: 0px 4px 18px 0px rgba(16, 67, 136, 0.1);
        border-radius: 4px;
        align-items:flex-start;
        .index-box {
            padding: 2px 8px;
            background: rgba(51, 133, 255, 0.1);
            border-radius: 1px;
            font-size: 13px;
            color: #1990ff;
        }
        .right-box {
            margin-left: 7px;
        }
        @{deep} .icon{
            padding:0 4px;
            color:#B9C1CD;
        }
        .select-box {
            margin-bottom:10px;
            @{deep} .van-cell {
                padding: 0;
                background: #F5F7FA;
                .van-field__error-message{
                    background:#fff;
                }
            }

            @{deep} .input-cell,
            @{deep} textarea{
                width: 100%;
                border: 1px solid #E4E8EB;
                padding: 0 10px;
                font-size: 13px;
                border-radius: 2px;
            }
            @{deep} input[type="text"]{
                font-size: 13px;
            }
            @{deep} textarea {
                padding: 10px;
            }

            @{deep} .van-cell__right-icon {
                line-height: 34px;
            }
        }
        .select-boxs{
            display:flex;
            justify-content:space-between;
            @{deep}>.van-field{
                width:48%;
            }
        }
        @{deep}.pic_upload{
            margin:0;
            padding:0;
        }
    }
}
</style>
